<template>
  <MainContent title="营销模型">
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="模型名称">
            <el-input v-model="tableForm.name" clearable placeholder="请输入流程名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="tableForm.status" class="m-2" placeholder="请输入">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <!--          <ins-cascader-filter @change="(value) => tableForm.queryInsIds = value"></ins-cascader-filter>-->

          <!-- <el-form-item class="">
           
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="isModel = true" v-has="['03020101']">新建模型</el-button>
            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
        <!-- <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="isModel = true">新建模型</el-button>
          </el-form-item>
        </template> -->
      </SearchBar>
    </template>
    <!--    <template #actions-bar>-->
    <!--      <el-button type="primary" @click="isModel = true">新建模型</el-button>-->
    <!--    </template>-->
    <LayoutTable ref="marketingModel" url="/flow/marketingJourneyInfoEntity/pageList" :setSearch="setSearch"
      disable-auto-height :param="tableForm">
      <el-table-column prop="name" label="模型名称" min-width="150"></el-table-column>

      <el-table-column prop="journeyStrategyNum" label="策略数量" min-width="100"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="100" v-has="['03020105']">
        <template #default="scope">
          <el-switch :value="scope.row.status" :active-value="1" :inactive-value="0" @change="statusUpdate(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" min-width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100">
        <template #default="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150" v-has="['03020102', '03020103', '03020104']">
        <template #default="scope">
          <div>
            <el-button link type="primary" @click="
              $router.push(
                `/flow/auto/marketingModel/modelDetail/${scope.row.id}`
              )
              " v-has="['03020104']">
              详情
            </el-button>

            <el-button link type="primary" @click="toEdit(scope.row)" v-has="['03020102']">
              编辑
            </el-button>
            <el-button @click="del(scope.row)" link type="primary" v-has="['03020103']">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </LayoutTable>
  </MainContent>
  <addModel :isModel="isModel" :modelId="modelId" @confirmFormData="confirmFormData" @cancel="cancel"></addModel>
  <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="营销模型" export-type="flowModelExport">
  </exportData>
</template>
<script lang="ts">
export default {
  name: "MarketingModel",
};
</script>
<script lang="ts" setup>
import MarketingModelApi from "@/api/marketingModelApi.js";
import { dateFormat } from "@/utils/filters";
import { ElMessage, ElMessageBox } from "element-plus";
import addModel from "./addModel.vue";
import exportData from "@/components/exportData/exportData.vue";
const tableForm = ref({
  name: "",
  status: "",
  queryInsIds: [],
});
const showExportData = ref(false);
const statusList = ref([
  { id: "", name: "全部" },
  { id: 1, name: "启用" },
  { id: 0, name: "停用" },
]);
const isModel = ref(false);
const modelId = ref(Number(null));
const setSearch = ref(Number());
const del = (row: any[]) => {
  ElMessageBox.confirm("是否删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delMarketingModel(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const marketingModel = ref();

const statusUpdate = (row: any[]) => {
  ElMessageBox.confirm("是否修改?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      setStatus(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};
const setStatus = async (row: any) => {
  let params = {
    id: row.id,
    status: row.status == 1 ? 0 : 1,
    name: row.name,
  };
  let rs = await MarketingModelApi.setStatus(params);
  if (rs.code === 200) {
    ElMessage({
      showClose: true,
      message: "修改状态成功",
      type: "success",
    });
    onSearch();
  }
};
const delMarketingModel = async (row: any) => {
  let rs = await MarketingModelApi.delMarketingModel({
    id: row.id,
    name: row.name,
  });
  if (rs.code === 200) {
    ElMessage({
      showClose: true,
      message: "删除模块成功",
      type: "success",
    });
    onSearch();
  }
};

const toEdit = (row: any) => {
  modelId.value = row.id;
  isModel.value = true;
};
const confirmFormData = () => {
  onSearch();
};
const cancel = () => {
  isModel.value = false;
  setTimeout(() => {
    modelId.value = Number(null);
  }, 500);
};

const onSearch = () => {
  setSearch.value++;
};
const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped></style>
